<template>
    <div class="equipmentLedger">
        <div class="btnList">
            <div class="btn" :class="{ active: activeIndex == 1 }" @click="setActive(1)">基本信息</div>
            <div class="btn" :class="{ active: activeIndex == 2 }" @click="setActive(2)">厂家信息</div>
            <div class="btn" :class="{ active: activeIndex == 3 }" @click="setActive(3)">技术参数</div>
            <div class="btn" :class="{ active: activeIndex == 4 }" @click="setActive(4)">BIM模型</div>
        </div>
        <div v-if="activeIndex == 1" class="box">
            <div class="detailBox">
                <div>设备名称：<span>一次风机</span></div>
                <div>所属系统：<span>锅炉系统</span></div>
                <div>所属空间：<span>焚烧炉2号房</span></div>
                <div>是否附属设备：<span>是</span></div>
                <div>参数1：<span>220w</span></div>
                <div>二维码：<span>生产二维码</span></div>
            </div>
            <div class="detailBox">
                <div>设备编号：<span>CV2024091092</span></div>
                <div>设备型号：<span>TZ2019010293</span></div>
                <div>所属品牌：<span>严选科技</span></div>
                <div>监控设备：<span>远程监控</span></div>
                <div>参数2：<span>硬件</span></div>
            </div>
        </div>
        <div v-if="activeIndex == 2" class="box">
        </div>
        <div v-if="activeIndex == 3" class="box">
        </div>
    </div>
</template>

<script setup lang="ts">
let activeIndex = ref(1)

const setActive = (index: number) => {
    activeIndex.value = index
}
</script>

<style lang="scss" scoped>
.equipmentLedger {
    .btnList {
        display: flex;
        justify-content: space-around;
        margin-bottom: vh(10);

        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: vh(68);
            height: vh(24);
            background: rgba(0, 222, 250, 0.2);
            border-radius: vh(4);
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: vh(12);
            color: #00E3FF;
            cursor: pointer;
        }

        .active {
            border: vh(1) solid #00DEFA;
        }
    }

    .box {
        display: flex;

        .detailBox {
            flex: 1;

            div {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: vh(12);
                line-height: vh(24);
                color: #A1C3C7;

                span {
                    color: #FFFFFF;
                }
            }
        }

    }
}
</style>
